<template>
	<view class="">
		<canvas canvas-id="drawCanvas"
			style="width: 750rpx; height: 750rpx;position: absolute;left:-750rpx;top: -750rpx;background: #fff;z-index: 99;"></canvas>
	</view>

</template>

<script>
	import {
		drawCanvas,
		generateCanvas
	} from '@/utils/utils.js'
	export default {
		name: "preview-phonecase",
		props: {
			stickerImageList: {
				type: Array,
				default: () => []
			},
			frameImageUrl: {
				type: String,
				default: ''
			},
			baseImageUrl: {
				type: String,
				default: ''
			},
			detail:{
				type: Array,
				default: () => []
			},
		},
		data() {
			return {
				decorationList: [],
				details:[],
				img: '',
			};
		},
		watch: {
			stickerImageList(newValue, oldValue) {
				this.decorationList = newValue
			},
			detail(newValue, oldValue) {
				this.details = newValue
			}
		},
		methods: {
			show(index) {
				this.getImg(index)
			},
			// 生成图片
			getImg(index) {
				uni.showLoading({
					mask:true
				})
				const _this = this
				let canvasData = {
					bottomMaterialUrl: this.baseImageUrl,
					topMaterialUrl: this.frameImageUrl,
					stickerImageList: this.stickerImageList,
				}
				// console.log(canvasData);
				let gc = generateCanvas
				// 生成效果图
				gc(canvasData, this.stickerImageList.length * 300 + 500, this).then(res => {
					this.img = res
					let imgs = this.details.map(item=>{
						return item.imageUrl
					})
					let arr = [this.img,...imgs]
					uni.previewImage({
						current: index,
						urls: arr
					});
					uni.hideLoading()
				})
			},
		},
		onLoad() {
			console.log('preview-phonecase');
		}
	}
</script>

<style lang="scss" scoped>
	.preview-phonecase {
		height: 100%;
		width: 100%;
		position: absolute;
		z-index: 99;
		top: 0;
		left: 0;
		background-color: #000;

		.swiper {
			height: 100vh;
		}

		.movable-area {
			height: 750rpx;
			width: 750rpx;
			position: absolute;
			top: calc(50% - 375rpx);

			.movable-view {
				height: 750rpx;
				width: 750rpx;
				overflow: hidden;

				.picture {
					height: 100%;
					width: 100%;
					position: absolute;
					top: 0;
					left: 0;

					&.top,
					&.btm,
					&.bg,
					&.fg {
						height: 750rpx;
						width: 750rpx;
					}

					&.btm {
						z-index: 0;
					}

					&.bg {
						z-index: 2;
					}

					&.fg {
						z-index: 4;
					}

					&.top {
						z-index: 999;
					}
				}
			}
		}
	}
</style>